<template>
  <div class="keyboard-container">
    <div class="combination">组合键</div>
    <div class="form">
        <div class="form-item" v-for="item in availableKeywords" :key="item.value">
            <div class="form-label">
                <div class="style-pressEnter">
                    {{item.label}}
                </div>
                :
            </div>
            <div class="form-value">
                {{item.value}}
            </div>
        </div>
    </div>
    <div class="combination">允许输入方式</div>
    <div class="form">
        <div class="form-item-simple" v-for="item in availIptWay" :key="item">
            <div class="style-pressEnter">
                {{item}}
            </div>
        </div>
    </div>
    <div class="combination">允许输入方式</div>
    <div>
        <a-button @click="adjustConnect">校准连接</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const emits = defineEmits(['adjustConnect'])
const availableKeywords = [
    {
        label:'ctrl+v',
        value: '粘贴'
    },
    {
        label:'ctrl+c',
        value: '复制'
    },
    {
        label:'ctrl+h',
        value: '主页键'
    },
    {
        label:'ctrl+b',
        value: '返回键'
    },
    {
        label:'ctrl+o',
        value: '任务切换键'
    }
] 
const availIptWay = ['鼠标','键盘']

const adjustConnect = () => {
    emits('adjustConnect')
}
</script>

<style scoped lang="less">
.keyboard-container{
    width: 100%;
    padding: 20px 10px;
}
.form{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.form-item{
    min-width: 200px;
    display: flex;
}
.form-item-simple{
    min-width: 60px;
    display: flex;
}
.form-label{
    width: 85px;
    display: flex;
    align-content: center;
    gap: 5px;
}
.form-value{
    flex: 1;
}
.combination{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    padding: 20px 0px;
}
.style-pressEnter {
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background: #eee;
    padding: 4px 10px 2px;
    border-radius: 10px;
    text-align: center;
}
</style>